import React from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import { connect } from 'react-redux'
import {dispatchType, routerConfig, routerConfigItem} from '../util/interface'

const RouterView: React.FC<routerConfig & dispatchType> = (props) => {
  let arr = props.routers
  let routerArr = arr.filter((item: routerConfigItem) => !item.to)
  let redirectArr = arr.filter((item: routerConfigItem) => item.to).map(
    (item: routerConfigItem) => (
      <Redirect to={ `${item.to}` } path={ item.path } key={ item.path }></Redirect>
    )
  )
  console.log(props)
  return (
    <Switch>
      {
        routerArr.map((item: routerConfigItem) => (
          <Route path={item.path} render={ prop => {
            let { match: { path } } = prop
            return <item.component key={ item.path } routers={ item.children } { ...prop } />
          }} key={ item.path } exact={ item.path === '/' }></Route>
        )).concat(redirectArr)
      }
    </Switch>
  )
}
const mapStateToProps = (state:any) =>{
  return {
    user: 'admin'
  }
}
const mapDispatchToProps = (dispatch:Function)=>{
  return {
    getUserInfo:()=>{

    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)
